<template>
	<view>
		<view class="card-bg"></view>
		<view class="earnings-view">
			<view class="earnings-top">
				<view>
					<view class="earnings-num">{{userAssets.points}}</view>
					<view class="earnings-desc">可用积分</view>
				</view>

				<view class="tabBar-view">
					<view class="tabBar-item" @click="onNavShopping">
						<image src="/static/exchange-icon.png" class="tabBar-icon"></image>
						<view>积分兑换</view>
					</view>
					<navigator url="/pages/integralExchangeRecord/integralExchangeRecord" hover-class="none"
						class="tabBar-item">
						<image src="/static/record-icon.png" class="tabBar-icon"></image>
						<view>兑换记录</view>
					</navigator>
				</view>
			</view>

			<view class="earnings-cell">
				<view class="earnings-item">
					<view class="earnings-num">{{userAssets.routinePoints}}</view>
					<view class="earnings-desc">终身有效积分</view>
				</view>
				<view class="earnings-item">
					<view class="earnings-num" style="color: #FF2615;">{{userAssets.projectPoints}}</view>
					<view class="earnings-desc">
						<view>到期失效积分</view>
						<navigator
							:url="`/pages/staleDatedIntegral/staleDatedIntegral?projectPoints=${userAssets.projectPoints}`"
							hover-class="none" class="earnings-but">
							<view>查看</view>
							<uni-icons type="right" color="#FF2615" size="22upx"></uni-icons>
						</navigator>
					</view>
				</view>
			</view>
		</view>

		<view v-if="dataList.length" class="earnings-list">
			<view class="list-title">收支明细</view>
			<view v-for="(item, index) in dataList" :key="index" class="list-item">
				<view class="label-view">
					<view>{{item.title}}</view>
					<view class="label-time">{{dateFormat(item.createTimes, 'YYYY.MM.DD')}}</view>
				</view>
				<view class="value-view" :style="item.status == '20'?'color: #00C86C;' : ''">
					<view class="plus-sign">{{ item.status == '10' ? '+' : '-'}}</view>
					<viiew>{{item.points}}</viiew>
				</view>
			</view>
		</view>
		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userAssets: {
					points: '', // 积分余额（总=项目积分+常规积分）
					projectPoints: '', // 项目积分
					routinePoints: '', // 常规积分
				},
				dataList: [],
				queryData: {
					total: 0,
					pageNo: 1,
					pageSize: 15,
				}
			}
		},
		onLoad(options) {
			this.getRequestList()
			this.getUserAssets()
		},
		onPullDownRefresh() {
			this.queryData.pageNo = 1
			this.getRequestList()
		},
		onReachBottom() {
			if (this.queryData.total <= this.dataList.length) return
			this.queryData.pageNo += 1
			this.getRequestList()
		},
		methods: {
			async getRequestList() {
				uni.$util.showLoading()
				const res = await uni.$api.getPointsPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			},
			async getUserAssets() {
				const res = await uni.$api.getUserAssets()
				this.userAssets = res.data
			},
			onNavShopping() {
				uni.navigateTo({
					url: '/pages/integralShopping/integralShopping'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card-bg {
		width: 100%;
		height: 100upx;
		background: #FF2615;
	}

	.earnings-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin-top: -80upx;
		padding: 40upx;
		padding-bottom: 22upx;
		position: relative;

		.earnings-top {
			width: 100%;
			@extend .row-between;

			.earnings-num {
				font-size: 47rpx;
				font-weight: 600;
				color: #FF442F;
			}

			.earnings-desc {
				font-size: 22rpx;
				font-weight: 400;
				color: #69442E;
			}

			.tabBar-view {
				@extend .row;

				.tabBar-item {
					@extend .row;
					padding: 18upx 24upx;
					font-size: 25rpx;
					font-weight: 400;
					color: #FF2615;
					border-radius: 7rpx;
					border: 1rpx solid #FF2615;

					.tabBar-icon {
						width: 29upx;
						height: 29upx;
						margin-right: 7upx;
					}
				}

				.tabBar-item+.tabBar-item {
					margin-left: 18upx;
				}
			}
		}

		.earnings-cell {
			width: 100%;
			@extend .row-between;
			padding-top: 22upx;
			border-top: 1px solid #F7E8E4;
			margin-top: 40upx;

			.earnings-item {
				width: calc(100% / 2);

				.earnings-num {
					font-size: 40rpx;
					font-weight: 600;
					color: #2C1101;
				}

				.earnings-desc {
					@extend .row-start;
					font-size: 22rpx;
					font-weight: 400;
					color: #69442E;

					.earnings-but {
						@extend .row;
						color: #FF2615;
						margin-left: 24upx;
					}
				}
			}
		}
	}

	.earnings-list {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin-top: 18upx;
		padding: 0 40upx;
		padding-top: 25upx;

		.list-title {
			width: 100%;
			@extend .row-start;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #2C1101;
			margin-bottom: 25upx;
			position: relative;

			&:before {
				content: "";
				width: 56rpx;
				height: 14rpx;
				background: rgba(255, 38, 21, 0.1);
				position: absolute;
				bottom: 0upx;
			}
		}

		.list-item {
			width: 100%;
			padding: 27upx 0;
			@extend .row-between;
			border-top: 1px solid #F7E8E4;

			.label-view {
				font-size: 29rpx;
				font-weight: 400;
				color: #2C1101;

				.label-time {
					font-size: 25rpx;
					color: #B8ACA3;
					margin-top: 10upx;
				}
			}

			.value-view {
				@extend .row;
				font-size: 29rpx;
				font-weight: 400;
				color: #FF2615;

				.plus-sign {
					margin-right: 10upx;
				}
			}
		}
	}
</style>